<template>
  <div class="global-slide-up-animation total-num-block">
    <div v-for="(_, key) in dataCpt" :key="key" class="item">
      <div class="icon">
        <div class="bg" :style="{ backgroundColor: itemMap[key]?.color }"></div>
        <el-icon :color="itemMap[key]?.color" size="calc(var(--my-change-base12-2x-size) + 16px)">
          <component :is="itemMap[key]?.icon"></component>
        </el-icon>
      </div>
      <div class="info">
        <div>{{ itemMap[key]?.label }}</div>
        <div>
          <rest-count-to :endVal="dataCpt[key]" :curStyle="valueStyle" :precision="2" :forcedDecimals="false"></rest-count-to>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import type { CSSProperties, Component } from 'vue';
  import SolarBoltCircleBold from '~icons/solar/bolt-circle-bold';
  import SolarChart2Bold from '~icons/solar/chart-2-bold';
  import SolarGraphNewBold from '~icons/solar/graph-new-bold';
  import SolarPresentationGraphBold from '~icons/solar/presentation-graph-bold';
  import SolarPieChart2Bold from '~icons/solar/pie-chart-2-bold';
  import SolarPaperclipBroken from '~icons/solar/paperclip-broken';
  import RestCountTo from '@/components/rest/rest-count-to/rest-count-to.vue';
  import type { HomeCensus, HomeRegisterData } from '@/api/home';

  interface Props {
    /** 数据 */
    statisticsData?: HomeCensus;
  }

  const props = withDefaults(defineProps<Props>(), {
    statisticsData: () => ({}),
  });

  const valueStyle: CSSProperties = {
    fontSize: `calc(var(--my-change-base12-2x-size) + 8px)`,
    fontWeight: `bolder`,
    color: `var(--el-color-primary)`,
  };

  type ItemMap = Record<
    string,
    {
      color: string;
      label: string;
      icon: Component;
    }
  >;

  const itemMap = ref<ItemMap>({
    'todayAddUserNum': {
      color: 'var(--el-color-primary)',
      label: '今日注册',
      icon: SolarBoltCircleBold,
    },
    'todayLoginUserNum': {
      color: 'var(--el-color-warning)',
      label: '今日登录',
      icon: SolarChart2Bold,
    },
    'threeDaysAddUserNum': {
      color: 'var(--el-color-danger)',
      label: '三日新增',
      icon: SolarGraphNewBold,
    },
    'weekAddUserNum': {
      color: 'var(--el-color-success)',
      label: '七日新增',
      icon: SolarPresentationGraphBold,
    },
    'weekActiveUserNum': {
      color: 'var(--el-color-primary)',
      label: '七日活跃',
      icon: SolarPieChart2Bold,
    },
    'monthActiveUserNum': {
      color: 'var(--el-color-warning)',
      label: '月活跃',
      icon: SolarPaperclipBroken,
    },
  });

  const dataCpt = computed<HomeRegisterData>(() => {
    return {
      todayAddUserNum: props.statisticsData.todayAddUserNum,
      todayLoginUserNum: props.statisticsData.todayLoginUserNum,
      threeDaysAddUserNum: props.statisticsData.threeDaysAddUserNum,
      weekAddUserNum: props.statisticsData.weekAddUserNum,
      weekActiveUserNum: props.statisticsData.weekActiveUserNum,
      monthActiveUserNum: props.statisticsData.monthActiveUserNum,
    };
  });
</script>

<style lang="scss" scoped>
  .total-num-block {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    height: 100%;

    .item {
      display: flex;
      flex-flow: row nowrap;
      place-content: center center;
      align-items: center;
      min-width: 0;

      .icon {
        position: relative;
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;

        .bg {
          position: absolute;
          width: 56px;
          height: 56px;
          border-radius: 50%;
          opacity: 0.05;
        }
      }

      .info {
        flex: 1;

        div:nth-child(1) {
          font-size: calc(var(--my-change-base12-2x-size));
          line-height: 1em;
          color: var(--el-text-color-regular);
        }

        div:nth-child(2) {
          margin-top: 10px;
        }
      }
    }
  }
</style>
